<template>
	<view>

		<u-popup v-model="show" mode="top" length="30%" closeable>
			<view class="content">
				<u-field class="u-border-bottom" label="昵称:"  v-model="name" placeholder="输入新昵称" /></u-field>
				
				<button @tap="submit" :style="[inputStyle]" class="getCaptcha u-m-t-20">确定修改</button>
			</view>
			
					
			
		</u-popup>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-10  u-m-t-20">
				<!-- 上传头像 使用slot在下面上传组件 -->
				<u-avatar :src="vuex_user.avatar_url" size="140"  @click="previewImg(vuex_user.avatar_url)"></u-avatar>
				<oss-upload></oss-upload>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20 ">{{vuex_user.email}}</view>
				<view class="u-font-14 u-tips-color">昵称:{{vuex_user.name}} ID:({{userinfo.id}})</view>
			</view>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="man-add" title="修改昵称" @click="show = true"></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="rmb-circle" title="所有订单"  @click="toOrder"></u-cell-item>
				<u-cell-item icon="star" title="我的收藏" @click="toCollects"></u-cell-item>
				<u-cell-item icon="coupon" title="地址管理" @click="toAddress"></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="edit-pen" title="商品管理" @click="togoodsres"></u-cell-item>
				<u-cell-item icon="account" title="会员管理" @click="touser"></u-cell-item>
<!-- 				<u-cell-item icon="play-circle" title="我的音乐" @click="tomusic"></u-cell-item>
				<u-cell-item icon="level" title="视频轮播" @click="toVideo"></u-cell-item> -->
			</u-cell-group>
		</view>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="setting" title="退出登陆" @click="toLogout"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				name: '',
				userinfo:'',
			}
		},
		computed: {
			inputStyle() {
				let style = {};
				if( this.name) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['warning'];
				}
				return style;
			}
		},
		onLoad() {
			this.$u.api.userinfo().then(res=>{
				this.userinfo = res
				this.name = res.name
			})
			//console.log(this.userinfo,'%%')
			if(!this.$u.utils.isLogin()) return
		},
		methods: {
			//表单提交验证
			async submit() {
				if(!this.name) return
				//要改的参数
				const params = {
					name:this.name,
				}
				
				//登陆接口AIP数据
				const changeres = await this.$u.api.changeName(params)
				//utils 自定义工具 请求并缓存用户信息
				this.$u.utils.updateUser()
				//关闭弹窗
				this.show = false
				this.name = ''
				this.$u.toast('修改成功')
			},
			//退出登陆
			async toLogout(){
				
				const logoutres = await this.$u.api.authLogout()
						
						//清除vuex 里面的 token
					    this.$u.vuex('vuex_token',null)
						this.$u.vuex('vuex_user',{})
						
					    this.$u.toast('退出成功')
						setTimeout(()=>{
							this.$u.route({
								type:'reLaunch',    //关闭所引页 reLaunch 可以跳转普通页和tabbar
								url:'pages/index/index'
							})
						},1000)	

			},
			//跳转到地址
			toAddress(){
				this.$u.route({
					type:'navigateTo',  
					url:'/pages/center/address'
				})
			},
			toCollects(){
				this.$u.route({
					type:'navigateTo',  
					url:'/pages/center/mycollects'
				})
			},
			toOrder(){
				this.$u.route({
					type:'navigateTo',  
					url:'/pages/cart/orders'
				})
			},
			togoodsres(){
				this.$u.route({
					type:'navigateTo',  
					url:'/pages/cate/admingoods'
				})
			},
			touser(){
				this.$u.route({
					type:'navigateTo',  
					url:'/pages/center/userlist'
				})
			},
			tomusic(){
				this.$u.route({
					type:'navigateTo',  
					url:'/pages/center/music'
				})
			},
			toVideo(){
				this.$u.route({
					type:'navigateTo',  
					url:'/pages/center/video'
				})
			},
			//点击查看原图
			previewImg(e) {
				let _this = this;
				let imgsArray = [];
				imgsArray[0] = e
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			
		},

	}
</script>

<style lang="scss">
page{
	background-color: #ededed;
}

.camera{
	width: 54px;
	height: 44px;
	
	&:active{
		background-color: #ededed;
	}
}
.user-box{
	background-color: #fff;
}
.content {
		width: 600rpx;
		margin: 80rpx auto 0;
		margin-top: 90rpx !important;

		.title {
			text-align: left;
			font-size: 60rpx;
			font-weight: 500;
			margin-bottom: 100rpx;
		}
		input {
			text-align: left;
			margin-bottom: 10rpx;
			padding-bottom: 6rpx;
		}
		.tips {
			color: $u-type-info;
			margin-bottom: 60rpx;
			margin-top: 8rpx;
		}
		.getCaptcha {
			background-color: rgb(253, 243, 208);
			color: $u-tips-color;
			border: none;
			font-size: 30rpx;
			padding: 12rpx 0;
			
			&::after {
				border: none;
			}
		}
		.alternative {
			color: $u-tips-color;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}
	}
</style>